<template>
  <div id="devicePage" class="wrapper">
    <div class="mb-3">
      <el-input placeholder="请输入内容"  class="input-with-select w250"  size="small" v-model="searchTxt">
        <el-button  slot="append"  class="ur-btn ur-btn-primary" @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
      </el-input>
    </div>
    <!--表格-->
    <el-table ref="tableDom3" :data="getGidData" style="width: 100%" :height="clientHeight-150" highlight-current-row @selection-change="selsChange" @row-click="rowClick">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
      <el-table-column v-for="(v,index) in tables.columns" :prop="v.field" :label="v.title" :width="v.width" align="center" :key="index">
        <template slot-scope="scope" >
          <span v-if="v.field=='BoxType'">{{global.BoxTypes[scope.row[v.field]-1]}}</span>
          <span v-else-if="v.field=='InstallDate'">{{api.formatDate(scope.row[v.field])}}</span>
          <span v-else-if="v.field=='RtuInstalled'">{{scope.row[v.field]==1?'有':'无'}}</span>
          <i v-else-if="v.field=='localtion'" class="font18 iconfont icon-quyu txt_gray" @click="showMap=true;tables.sel=scope.row"></i>
          <span  v-else>{{scope.row[v.field]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120">
        <template slot="header" slot-scope="scope">
          <label @click="handleAdd"><i class="iconfont icon-tianjia"></i>添加</label>
        </template>
        <template slot-scope="scope">
          <label>
            <i class="font18 iconfont icon-bianji txt_orange" @click="handleEdit(scope.$index, scope.row,true)"></i>
            <i class="font18 iconfont icon-shanchu1 txt_blue2" @click="handleDel(scope.$index, scope.row)"></i>
            <!--<i class="font18 iconfont icon-fuzhi txt_gray" @click="handlCopy(scope.$index,scope.row)"></i>-->
          </label>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt-3">
      <el-button class="float-left" type="danger" @click="batchRemove"  :disabled="sels.length===0">批量删除</el-button>
      <el-pagination class="float-right " @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[100,200,500,1000]" :current-page="1" :page-size="pageSize" :total="total"></el-pagination>
    </div>

    <!--地图-->
    <el-dialog v-el-drag-dialog title="获取位置" :visible.sync="showMap" width="900px" @close="search">
      <template v-if="showMap">
        <u-map :iconType="1" :boxs="tables.datas" :box="tables.sel"  @getLngLat="getLngLat($event)"></u-map>
      </template>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import api from 'api/api'
  import fetch from "api/fetch"
  import uMap from 'base/map/map'
  import elDragDialog from 'directive/el-dragDialog'

  export default {
    directives:{elDragDialog},
    components: {uMap},
    props: {},
    data() {
      return {
        searchList:[],
        radio:1,
        total: 0,
        currentPage: 1,
        pageSize:100,
        searchType:1,
        searchTxt:null,
        tables: {
          sel: null,//选中行
          columns: [
            {field: "Name", title: "名称", width: null},
            {field: "No", title: "控制箱编号", width: null},
            {field: "AreaName", title: "责任区", width: null},
            {field: "BoxType", title: "控制箱型号", width: '110'},
            {field: "DevAddr", title: "UID", width: '160'},
            {field: "RtuInstalled", title: "是否有RTU", width:null},
            {field: "InstallDate", title: "安装时间", width: '110'},
            // {field: "gatherType", title: "电流采集方式", width: '105'},
            {field: "localtion", title: "定位", width: null},
            {field: "Switchs", title: "回路", width: null},
            {field: "Poles", title: "灯杆数", width: null},
          ],
          datas: []
        },
        sels:[],
        api:api,
        showMap:false
      }
    },
    watch: {},
    computed: {
      getGidData(){
        if(this.tables.datas.length){
          return this.tables.datas.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
        }
      },
      ...mapState({
        clientHeight: state => state.comm.clientHeight,
        clientWidth: state => state.comm.clientWidth,
      }),
    },
    methods: {
      getLngLat(v){
        this.showMap=false
      },
      indexMethod(index) {
        return index + 1
      },
      rowClick(row, event, column){

      },
      selsChange(sels) {
        this.sels = sels
        this.sels.splice(1,0)
      },
      handleSizeChange(val) {
        this.pageSize=val
      },
      handleCurrentChange(val) {
        this.currentPage=val
      },
      handleAdd() {
        this.$router.push({ path: '/addDevice'})
      },
      handleEdit(index, row, isEdit) {
        // this.$router.push({ path: '/addDevice?id='+row.BoxId})
        this.$router.push({name:'addDevice',params:{id:row.BoxId,isCopy:false}})
      },
      handleDel(index, row) {
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
          .then(() => {
            api.fetch('/DevRtu/Delete',[row.BoxId])
              .then(r=>{
                this.$message.success('删除成功')
                this.queryFun()
              })
          })
      },
      handlCopy(index,row){
        this.$router.push({ name:'addDevice',params:{id:row.BoxId,isCopy:true}})
      },
      batchRemove() {
        let ids=[]
        this.sels.map(r=>{
          ids.push(r.BoxId)
        })
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
          .then(() => {
            api.fetch('/DevRtu/Delete',ids)
              .then(r=>{
                this.$message.success('删除成功')
                this.search()
              })
          })
      },
      search(){
        fetch.queryLikeBox(this.searchTxt)
          .then(r=>{
            this.total=r.data.length
            this.tables.datas=r.data
          })
      }
    },
    created() {
      this.search()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
